<template>
  <div class="index">
    <div class="index-page">
      <nav-bar></nav-bar>

      <div class="page-first">
        <img
          class="first-back"
          src="https://oss-cdn.anbio.com/uploads/52a8debf8e30050a0085fd433175389f.png"
          alt=""
        />

        <div class="first-block">
          <div class="block-title">Start Now</div>
          <div class="block-text">
            <span style="font-weight: bold">Earn up to $500</span> when you set
            up a qualifying<br />business account.
          </div>

          <div class="block-button" @click="joinUs">Join Us</div>
        </div>
      </div>

      <div class="page-second">
        <img
          class="second-back"
          src="https://oss-cdn.anbio.com/uploads/da52400d4807999472eb3942b9c458e6.png"
          alt=""
        />
        <img
          class="second-title"
          src="../../assets/common/home-back-4.png"
          alt=""
        />
      </div>

      <div class="page-three">
        <img
          class="three-back"
          src="https://oss-cdn.anbio.com/uploads/b1b520553669c3b531852547e221eb11.png"
          alt=""
        />
        <div class="relative">
          <div class="three-title">Products & Services</div>
          <div class="three-lint"></div>
          <div class="three-text">Explore and apply online.</div>
          <div class="three-display">
            <div class="display-list" v-for="(item, index) in 3" :key="index">
              <div class="list">
                <img
                  class="list-img"
                  :src="
                    index == 0
                      ? require('../../assets/common/home-back-6.png')
                      : index == 1
                      ? require('../../assets/common/home-back-7.png')
                      : require('../../assets/common/home-back-8.png')
                  "
                  alt=""
                />
                <div class="list-title">
                  {{
                    index == 0
                      ? "Business account"
                      : index == 1
                      ? "Business loans"
                      : "Investments"
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="three-block">
            <div class="block-left">
              At PMT, we're committed to giving business owners the support they
              need to help them achieve their ambitious goals.
            </div>
            <div class="block-lint"></div>
            <div class="block-right">
              <div class="right-list" v-for="(item, index) in 2" :key="index">
                <div class="list-title">
                  {{ index == 0 ? "Business Account" : "Payment Solutions" }}
                </div>
                <div class="list-text">
                  {{
                    index == 0
                      ? "Whatever your business size or industry, we offer business account solutions that are built to meet your needs, support your visions, and keep you moving forward."
                      : "A complete suite of merchant services to accept credit cards, made simple and secure."
                  }}
                </div>
              </div>
            </div>
          </div>

          <div class="three-botton">
            Copyright ™ PMT Tech All rights reserved.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var _h = window.innerHeight;
global.height = _h;

import navBar from "./navbar.vue";

import { getHomefundList } from "../../api/index";

export default {
  components: {
    navBar,
  },

  data() {
    const self = this;
    return {
      activeIndex: 0,
      height: document.documentElement.clientHeight,
      // // 区域
      // swiperOption: {},
      // // swiper
      // opts: {
      //   direction: "vertical",
      //   slidesPerView: "auto", //重要的
      //   mousewheel: true,
      //   speed: 800,
      //   grabCursor: true,
      //   updateOnWindowResize: true,
      //   height: document.documentElement.clientHeight,
      // },
      // // 触发
      // currentPage: 0,
      // testShow1: true,
      // testShow2: false,
      // testShow3: false,
      // testShow4: false,
      // testShow5: false,
      //-------------
    };
  },
  created() {
    this.aaa();
  },
  computed: {
    // pageSwiper() {
    //   return this.$refs.swiperPage.swiper;
    // },
  },
  mounted() {},

  methods: {
    aaa() {
      let params = {
        pageNo: 1,
        pageSize: 10,
      };
    },
    rollStart() {
      let page = this.$refs.swiperPage.swiper.activeIndex + 1;

      this.currentPage = page;
      switch (page) {
        case 1:
          this.testShow1 = true;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = false;
          break;
        case 2:
          this.testShow1 = false;
          this.testShow2 = true;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = false;
          break;
        case 3:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = true;
          this.testShow4 = false;
          this.testShow5 = false;
          break;
        case 4:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = true;
          this.testShow5 = false;
          break;
        case 5:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = true;
          break;
      }
    },
    rollEnd() {
      let page = this.$refs.swiperPage.swiper.activeIndex + 1;

      this.currentPage = page;
      switch (page) {
        case 1:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = false;
        case 2:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = false;
          break;
        case 3:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = false;
          break;
        case 4:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = false;
          break;
        case 5:
          this.testShow1 = false;
          this.testShow2 = false;
          this.testShow3 = false;
          this.testShow4 = false;
          this.testShow5 = false;
          break;
      }
    },

    handleScroll() {},
    toTop() {
      if (!("process" in window)) {
        this.pageSwiper.slideTo(0, 0);
      }
    },

    handleBannerIn(index) {
      this.$refs.swiperPage.swiper.slideTo(index, 1000, false);
    },

    joinUs() {
      this.$router.push({
        path: "/register",
      });
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="less" scoped>
.index {
  .index-page {
    .page-first {
      width: 100%;
      height: 922px;
      position: relative;

      .first-back {
        position: absolute;
        width: 100%;
        height: 922px;
        display: flex;
        left: 0;
        top: 0;
      }

      .first-block {
        position: absolute;
        z-index: 1;
        padding: 90px 50px 91px 82px;
        box-sizing: border-box;
        background: #ebebeb;
        border-radius: 76px;
        opacity: 0.85;
        top: 256px;
        left: 216px;
        text-align: left;
        .block-title {
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 60px;
          color: #2c3943;
          line-height: 69px;
          letter-spacing: 2px;
          text-align: left;
          font-style: normal;
          margin-bottom: 35px;
        }

        .block-text {
          font-family: Arial, Arial;
          font-weight: normal;
          font-size: 32px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 46px;
          text-align: left;
          font-style: normal;
        }

        .block-button {
          margin-top: 63px;
          width: 299px;
          height: 91px;
          background: linear-gradient(180deg, #fff6b5 0%, #f4b50b 100%);
          box-shadow: 0px 9 10px 0px rgba(0, 0, 0, 0.5);
          border-radius: 72px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 36px;
          color: #2c3943;
          line-height: 42px;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .page-second {
      position: relative;
      height: 709px;
      width: 100%;

      .second-back {
        width: 100%;
        height: 709px;
        position: absolute;
        left: 0;
        display: flex;
        top: 0;
      }

      .second-title {
        position: absolute;
        top: 230px;
        left: 149px;
        height: 202px;
        z-index: 1;
      }
    }

    .page-three {
      width: 100%;
      height: 1453px;
      position: relative;
      padding: 87px 159px;
      box-sizing: border-box;

      .three-back {
        width: 100%;
        height: 100%;
        display: flex;
        top: 0;
        position: absolute;
        left: 0;
      }

      .relative {
        position: relative;

        .three-title {
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 52px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 60px;
          text-align: center;
          font-style: normal;
        }
        .three-lint {
          width: 205px;
          height: 6px;
          background: #162d73;
          margin: 30px auto;
        }
        .three-text {
          font-family: ArialMT;
          font-size: 50px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 58px;
          letter-spacing: 2px;
          text-align: center;
          font-style: normal;
        }
        .three-display {
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 105px;

          .display-list {
            display: flex;
            align-items: center;
            justify-content: center;

            .list {
              .list-img {
                width: 69px;
                height: 69px;
                object-fit: contain;
              }

              .list-title {
                font-family: ArialMT;
                font-size: 30px;
                color: rgba(0, 0, 0, 0.85);
                line-height: 34px;
                text-align: center;
                font-style: normal;
                margin-top: 24px;
              }
            }
          }
        }

        .three-block {
          display: flex;
          margin-top: 195px;
          .block-left {
            width: 708px;
            padding-top: 26px;
            box-sizing: border-box;
            font-family: Arial, Arial;
            font-weight: bold;
            font-size: 34px;
            color: rgba(0, 0, 0, 0.85);
            line-height: 68px;
            text-align: left;
            font-style: normal;
          }

          .block-lint {
            margin: 0 92px;
            width: 2px;
            height: 637px;
            background: #979797;
            border: 1px solid #979797;
          }
          .block-right {
            width: 708px;
            .right-list {
              margin-bottom: 111px;

              .list-title {
                font-family: Arial, Arial;
                font-weight: bold;
                font-size: 36px;
                color: rgba(0, 0, 0, 0.85);
                line-height: 42px;
                letter-spacing: 1px;
                text-align: left;
                font-style: normal;
              }

              .list-text {
                font-family: ArialMT;
                font-size: 22px;
                color: rgba(0, 0, 0, 0.85);
                line-height: 31px;
                letter-spacing: 1px;
                text-align: left;
                font-style: normal;
                margin-top: 31px;
              }
            }
          }
        }

        .three-botton {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          letter-spacing: 1px;
          font-size: 20px;
          color: #585858;
          line-height: 31px;
          text-align: center;
          font-style: normal;
          margin-top: 34px;
        }
      }
    }
  }
}
</style>
